<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3D发光旋转正方体案例</title>
    <style>
        /* 15.背景样式美化 */
        body {
            /* 撑满整个视口viewport height高度 */
            height: 100vh;
            /* background:#000; */
            background-image: radial-gradient(#000,lightyellow,#000);
        }
        /* 4.给所有"面"做统一样式设置 */
        .boxs div{
            /* 设置宽高 */
            width: 200px;
            height: 200px;
            /* 编码阶段暂时使用的边框，后续优化 */
            border: 3px solid red;
            /* 设置文字大小 */
            font-size: 80px;
            /* 文字水平居中 */
            text-align: center;
            /* 文字垂直居中 */
            line-height: 200px;
            /* 5.六个面先脱离文档流，后续再通过变换构建正方体 */
            position: absolute;
            /* 16.每个面的美化 */
            /* 金色的边框与文字 */
            border:1px solid gold;
            color: gold;
            /* 设置边框圆角 */
            border-radius: 30px;
            /* 设置带不透明度的背景颜色 1完全不透明 0透明到看不见 */
            background-color: rgba(255,255,255,0.6);
            /* 用阴影制作发光效果 */
            box-shadow: 0 0 60px 0 gold;
        }
        /* 6.定义视角 */
        .show {
            /* 视角距离一般就是800px
             太小，距离太近，元素变形严重
             太大，距离太远，元素3D效果不明显*/
            perspective: 800px;
        }
        /* 7.给"体"开启3D效果 */
        .boxs{
            /* 注意:给父元素加
				这样父元素中的所有子元素才可以使用3D变换效果 */
            transform-style: preserve-3d;
            /* 8.子元素绝对定位脱离了文档流，需要设置父亲的宽高 */
            width: 200px;
            height: 200px;
            /* 9.让正方体水平居中，垂直方向靠下一点 */
            margin: 200px auto;
            /* 12.2 给正方体使用动画，六个面都需要同步旋转 */
            /* 播放动画:动画名turn 时长10s 匀速播放linear 无限次infinite */
            animation: turn 10s linear infinite;
        }
        /* 12.3 当悬停在正方体上时，动画播放状态暂停 */
        .boxs:hover {
            animation-play-state: paused;
        }
        /* 10.设置正方体中“前面”在空间中的位置 */
        .boxs>.p1 {
            transform: translateZ(100px);
        }
        /* 11.设置正方体中“后面”在空间中的位置 */
        .boxs>.p2 {
            /* 13.文字要设置水平镜面翻转 scaleX(-1)*/
            transform: translateZ(-100px) scaleX(-1);
        }
        /* 14.把后面剩下的4个面放到对应位置 */
        .boxs>.p3 {
            /* 先Y轴(垂直)旋转90度，再沿着Z轴出来100px */
            transform: rotateY(90deg) translateZ(100px);
        }
        .boxs>.p4 {
            /* 先Y轴(垂直)旋转90度，再沿着Z轴进去100px */
            transform: rotateY(90deg) translateZ(-100px) scaleX(-1);
        }
        .boxs>.p5 {
            /* 先X轴(水平)旋转90度，再沿着Z轴出来100px */
            transform: rotateX(90deg) translateZ(100px);
        }
        .boxs>.p6 {
            /* 先X轴(水平)旋转90度，再沿着Z轴进去100px */
            transform: rotateX(90deg) translateZ(-100px) scaleX(-1);
        }
        /* 12.1 定义动画，让正方体转起来 */
        @keyframes turn {
            100% {
                /* 表示到动画结束时，同时绕X轴、Y轴转1圈，Z轴不旋转 */
                transform: rotate3d(1,1,0,360deg);
            }
        }
    </style>
</head>
<body>
<!-- 1.设置视角 -->
<div class="show">
    <!-- 2.外层boxs代表正方"体" -->
    <div class="boxs">
        <!-- 3.内层每个div代表正方体的每个"面" -->
        <div class="p1">1</div>
        <div class="p2">2</div>
        <div class="p3">3</div>
        <div class="p4">4</div>
        <div class="p5">5</div>
        <div class="p6">6</div>
    </div>
</div>
</body>
</html>